<template>
  <div style="border: 1px solid #ccc;width: 100%;height: 100%;">
    <div style="display: flex;flex-direction: column;width: 100%;height: 100%; ">
      <Toolbar ref="toobar" style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"
        :mode="mode" />
      <div style="flex: 1;position:relative;">
        <Editor style="position:absolute;top:0;right:0;bottom:0;left:0; overflow-y: auto;" v-model="html"
          :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" @onChange="onChange" />
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Editor,
    Toolbar
  } from '@wangeditor/editor-for-vue'
  import {
    DomEditor
  } from '@wangeditor/editor'

  import "@wangeditor/editor/dist/css/style.css";
  import {
    upload
  } from '@/api/upload';

  import {
    toolbarConfig
  } from "./toolbar.js";


  export default {
    name: "WangEditor",
    components: {
      Editor,
      Toolbar
    },
    props: {
      /* 编辑器的内容 */
      value: {
        type: String,
        default: "",
      },
      /* 只读 */
      readOnly: {
        type: Boolean,
        default: false,
      },
      // 上传文件大小限制(MB)
      fileSize: {
        type: Number,
        default: 5,
      },
      /* 类型（base64格式、url格式） */
      type: {
        type: String,
        default: "url",
      }
    },

    data() {
      return {
        editor: '',
        toolbarConfig: toolbarConfig,
        editorConfig: {
          placeholder: '请输入内容...',
          MENU_CONF: {}
        },
        mode: 'simple', // or 'simple'
        html: ''

      };
    },
    created() {
      let that = this;
      this.editorConfig.MENU_CONF["uploadImage"] = {
        // allowedFileTypes: ['image/*'],
        // maxFileSize: 10 * 1024 * 1024, // 10M
        // base64LimitSize: 5 * 1024, // 5kb 以下插入 base64
        fieldName: "image",
        customUpload(file, insertFn) {
          that.uploadfile(file, insertFn);
        }

      }

    },
    computed: {

    },
    watch: {

    },

    mounted() {
      // 模拟 ajax 请求，异步渲染编辑器


    },
    beforeDestroy() {
      const editor = this.editor
      if (editor == null) return
      editor.destroy() // 组件销毁时，及时销毁编辑器
    },
    methods: {
      uploadfile(file, insertFn) {
        var data = new FormData();
        data.append("image", file); // file 即选中的文件
        const loading = this.loading('上传中...');
        upload(data).then(response => {
          insertFn(response.url, response.name, response.url);
          this.$modal.msgSuccess("上传成功");
          loading.close();
        }).catch(err => {
          loading.close();
        });

      },
      onCreated(editor) {

        this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错


        // this.$nextTick(() => {
        //  const toolbar = DomEditor.getToolbar(editor)
        //  console.log(toolbar.getConfig().toolbarKeys)

        // });


      },

      onChange(editor) {

        const text = editor.getHtml();

        // this.$emit('input', text);
      },



      setEditorHtml(val) {
        const editor = this.editor
        if (editor != null) {
          this.$nextTick(() => {
            const context = `${val}`
            this.editor.setHtml(context);
          
          });
     
        }

      },

      getEditorHtml() {
        const editor = this.editor
        if (editor != null) {
          return editor.getHtml()
        }
        return '';
      },

      ClearEditorHtml() {
        const editor = this.editor
        if (editor != null) {
          return editor.clear()
        }
        return '';
      },

      // 上传前校检格式和大小
      handleBeforeUpload(file) {
        // 校检文件大小

      },
      handleUploadSuccess(res, file) {

      },
      handleUploadError() {

      },
    },
  };
</script>


<style lang="scss" scoped>

</style>
